iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
自我挑戰組

資工的日常系列 第 8

HTML Bootstrap簡單介紹

  • 分享至 

  • xImage
  •  

wiki:https://zh.wikipedia.org/wiki/Bootstrap
前端:指的是展現給終端使用者的介面。
後端:是在伺服器上面執行的代碼
template:樣板
Bootstrap 是前端軟體框架(framework),用來更快更簡單的開發網頁。包括了HTML和CSS基礎設計模板 ,設計各種字體,表單(form),按鈕(Button)...也有一些JavaScript的插件。
重要的是他可以讓你簡單地創造出響應式網頁設計(Responsive Web Design),簡稱RWD。

Responsive Web Design
就是讓網頁在任何裝置(小的到手機,中的平板,大的電腦螢幕)都能自動漂亮的呈現網頁內容。

Bootstrap History
由Mark Otto和Jacob Thornton再Twitter上開發。再2011年8月在Github上釋出原始碼(open source)。2014年6月成為Github上第一名的project。

Bootstrap Features:

  1. Easy to use
  2. Responsive features(在手機、平板和電腦螢幕上使用響應式css呈現。)
  3. Mobile-first approach
  4. Browser compatibility(Chrome, Firefox, Internet Explorer, Safari, and Opera)

使用Bootstrap:
1.官網下載
2.使用CDN(Content Delivery Network),更前一篇一樣。
Bootstrap官網:http://getbootstrap.com/
CSS only,樣板來源:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

JS, Popper.js, and jQuery,動畫效果etc..:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

把這三行放在head標籤裡就能開始使用了。

以上是上課的ppt和網路上的內容整理。下一篇會做一個基礎使用。


上一篇
CPE 考題 Back to High School Physics
下一篇
HTML Bootstrap 初學應用 Button
系列文
資工的日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言